<!-- 首页推荐里面文章的单独显示页面 -->
<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="homeArticlePage">
      <!-- 头部菜单栏 -->
      <HomeHead :selectBtn="selectBtn"></HomeHead>
      <!-- 内容区域 -->
      <div class="content_box_out">
        <!-- 文章问题头区域 -->
        <div class="content_question_head_out_box">
          <div class="content_question_head_box">
            <!-- 文章头部上部的信息区域 -->
            <div class="question_head_information_box">
              <div class="question_head_information_left_box">
                <!-- 文章分类 -->
                <div class="question_head_information_left_class_box">
                  <TalkTypeBtn :btnList="btnList"></TalkTypeBtn>
                </div>
                <!-- 文章标题 -->
                <div class="question_head_information_content_title">{{ questionList.title }}</div>
                <!-- 文章简介 -->
                <div class="question_head_information_content_brief">{{ questionList.content_question }}</div>
              </div>
              <div class="question_head_information_right_box">
                <!-- 文章浏览数量 -->
                <div class="question_head_information_right_skim_box">
                  <p class="skim_number_text">被浏览</p>
                  <p class="skim_number">{{ questionList.skim_num }}</p>
                </div>
                <!-- 文章关注者数量 -->
                <div class="question_head_information_right_follow_box">
                  <p class="follow_number_text">关注者</p>
                  <p class="follow_number">{{ questionList.follow_username }}</p>
                </div>
              </div>
            </div>
            <!-- 文章头部下的功能区域 -->
            <div class="question_head_function_box">
              <!-- 关注按钮 -->
              <div class="question_head_function_btn_follow" @click="addFollow" :style="isFollow?changeBtnFollowStyle:''">
                <span class="btn_follow_span" v-if="!isFollow">+ 关注问题</span>
                <span class="btn_follow_span" v-if="isFollow">取消关注</span>
              </div>
              <!-- 写回答按钮 -->
              <div class="question_head_function_btn_writeAnswer" @click="isWrite=!isWrite">写回答</div>
              <!-- 邀请回答按钮 -->
              <div class="question_head_function_btn_inviteAnswer">邀请回答</div>
              <!-- 评论数量按钮 -->
<!--              <div class="question_head_function_btn_comment">-->
<!--                <div style="line-height: 39px;float: left;margin-right: 5px"><img src="../assets/comment_btn.png" class="btn_comment_img"></div>-->
<!--                <span style="float: left">{{ questionList.conmment_num }} 条评论</span>-->
<!--              </div>-->
              <!-- 分享按钮 -->
              <div class="question_head_function_btn_share">
                <div style="line-height: 39px;float: left;margin-right: 5px"><img src="../assets/share_btn.png" class="btn_comment_img"></div>
                <span style="float: left">分享</span>
              </div>
              <!-- 举报按钮 -->
              <div class="question_head_function_btn_report">
                <div style="line-height: 39px;float: left;margin-right: 5px"><img src="../assets/report_btn.png" class="btn_comment_img"></div>
                <span style="float: left">举报</span>
              </div>
              <!-- 其他按钮 -->
            </div>
          </div>
        </div>
        <!-- 文章主要区域 -->
        <div class="content_box">
          <!-- 左边内容区域 路由切换 -->
          <div class="content_left_box">
            <!-- 写答案区域 -->
            <ArticleWriteAnswer v-if="isWrite" :questionId="questionList.id" :ids="this.id"></ArticleWriteAnswer>
            <!-- 答案区域 -->
            <ArticleAnswer v-if="isCreate" :questionId="questionList.id"></ArticleAnswer>
          </div>
          <!-- 右边内容区域 -->
          <div class="content_right_box">
            <!-- 问题作者信息框 -->
            <div class="question_user_box">
              <!-- 头部文字 -->
              <div class="question_user_box_head">关于作者</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import HomeHead from '../components/HomeHead'
import TalkTypeBtn from '../components/TalkTypeBtn'
import ArticleAnswer from './articlePage/ArticleAnswer'
import ArticleWriteAnswer from './articlePage/ArticleWriteAnswer'
export default {
  name: 'homeArticlePage',
  components: {
    'HomeHead': HomeHead,
    'TalkTypeBtn': TalkTypeBtn,
    'ArticleAnswer': ArticleAnswer,
    'ArticleWriteAnswer': ArticleWriteAnswer
  },
  data () {
    return {
      isWrite: false,
      isFollow: false,
      isCreate: false,
      changeBtnFollowStyle: {'background-color': '#8590a6'},
      btnList: [],
      questionList: []
    }
  },
  computed: {
  },
  methods: {
    addFollow () {
      if (this.isFollow) {
        this.questionList.follow_username--
      } else {
        this.questionList.follow_username++
      }
      this.isFollow = !this.isFollow
    },
    getClassifyNameByQuestionId () {
      // 通过问题id获取对应的分类
      this.axios.get('/api/getClassifyNameByQuestionId', {
        params: {
          id: this.questionList.id
        }
      })
        .then((response) => {
          this.btnList = response.data.data
          console.log(response)
        })
        .catch((error) => {
          this.$Notice.error({
            title: '通知',
            desc: '接口，异常！'
          })
          console.info(error)
        })
    }
  },
  created () {
    this.id = this.$route.params.id
    // 通过问题id获取问题信息
    this.axios.get('/api/getQuestionByQuestionId', {
      params: {
        id: this.id,
        phone: sessionStorage.getItem('phone')
      }
    })
      .then((response) => {
        this.questionList = response.data.data
        console.log(response)
        this.isCreate = true
        this.getClassifyNameByQuestionId()
      })
      .catch((error) => {
        this.$Notice.error({
          title: '通知',
          desc: '接口，异常！'
        })
        console.info(error)
      })
  }
}
</script>

<style scoped>
  @import '../../../../static/css/article/HomeArticlePage.css';
</style>
